body {
  height: 100vh;
  max-width: 100%;
}
.block-container {
  display: grid;
  grid-template: 1fr 1fr 1fr 1fr 1fr 1fr 1fr / 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  margin: 5px 0;
  max-width: calc(100vh - 100px);
}

.block-container::before {
    content: '';
    width: 0;
    padding-bottom: 100%;
    grid-row: 1 / 1;
    grid-column: 1 / 1;
}

.block-container > *:first-child{
    grid-row: 1 / 1;
    grid-column: 1 / 1;
}

.block {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: x-large;
  border-width: 1px;
  border-color: transparent;
  border-style: solid;
}

.border-black {
  border-color: black;
}

.purple {
  background-color: purple;
  border-color: purple;
  color: purple;
}

.green {
  background-color: green;
  border-color: green;
  color: green;
}

.yellow {
  background-color: yellow;
  border-color: yellow;
  color: yellow;
}

.red {
  background-color: red;
  border-color: red;
  color: red;
}

.blue {
  background-color: blue;
  border-color: blue;
  color: blue;
}

.pink {
  background-color: pink;
  border-color: pink;
  color: pink;
}

.orange {
  background-color: orange;
  border-color: orange;
  color: orange;
}

.gray {
  background-color: gray;
  border-color: gray;
  color: gray;
}

.wrong {
  background-color: black !important;
  border-color: black !important;
  color: black !important;
}

.invalid {
  background-color: red;
}
.color-head {
  width: 30px;
  height: 5px;
}

.combination {
  text-align: end;
}